@import "style";

body {
  overflow-x: hidden;
}

html, body, #app {
  height: 100%;
}

.bg-white {
  background-color: @defaultBgColor;
}

.userAvatar {
  width: 5rem;
}

.top-btn-small-size {
  font-size: 1.5rem;
}

.warnColor::-webkit-input-placeholder {
  color: rgba(255, 0, 0, .3) !important; /* WebKit browsers */
}

　input:-moz-placeholder {
  color: rgba(255, 0, 0, .3) !important; /* Mozilla Firefox 4 to 18 */
}

　input::-moz-placeholder {
  color: rgba(255, 0, 0, .3) !important; /* Mozilla Firefox 19+ */
}

　input:-ms-input-placeholder {
  color: rgba(255, 0, 0, .3) !important; /* Internet Explorer 10+ */
}

.shade {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .5);
  z-index: 100;
}

.messageBox {
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);
  background-color: #fff;
  width: 85%;
  border-radius: 5px;
  font-size: 16px;
  -webkit-user-select: none;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transition: .2s;
  transition: .2s;
  text-align: center;
  z-index: 101;

  h3 {
    padding: 1rem 0;
    color: #fff;
    font-weight: normal;
    background: @activeColor;
  }

  p {
    padding: 2rem;
    border-bottom: 1px solid #ddd;
    min-height: 36px;
    position: relative;
    word-break: break-all;
  }

  &-btn {
    display: flex;
    height: 40px;
    line-height: 40px;

    button {
      line-height: 35px;
      display: block;
      background-color: #fff;
      -webkit-box-flex: 1;
      -ms-flex: 1;
      flex: 1;
      margin: 0;
      border: 0;
      color: @msgCanel;
    }

    button.messageBox-btn-affirm {
      color: @radioColor;
      background-color: @msgBtnBg;
      border-left: 1px solid #ddd;
    }
  }
}

.notes {
  height: 100%;

  .header-title, .header-left, .header-right {
    color: @defaultFontColor;
  }

  color: @mainFontColor !important;
  font-size: @mainTxtSize;

  input, textarea {
    outline: none;
    border: none;
  }

  .none-ct-show-tips {
    text-align: center;
    font-size: 1.8rem;
    margin-top: 50%;
  }

  .tips-overtime {
    color: #FF5959;
  }

  .fr {
    float: right;
  }

  .fl {
    float: left;
  }

  .page-infinite-loading-ct {
    left: 0;
    top: 50%;
    position: fixed;
    width: 100%;

    .page-infinite-loading {
      text-align: center;
      height: 50px;
      width: 100%;
      line-height: 50px;

      div {
        display: inline-block;
        vertical-align: middle;
        margin-right: 5px;
      }
    }
  }

  .notes-ct {
    height: 100%;
    padding-top: 44px;
    //padding-bottom: 2rem;
    .list {
      /*overflow: hidden;
      background-color: #FFFFFF;*/
      /*.list-content {
        line-height: 1.75rem;
        margin-top: 1rem;
        padding: 0 1rem 1rem 1rem;
        border-bottom: 1px solid @grayBorderColor;
        min-height: 2.75rem;
      }*/
    }

    .divcls {
      background: @grayBgColor;
      padding-bottom: 6rem;
    }

    .divcls2 {
      background: @grayBgColor;
      padding-bottom: 7.8rem;
    }

    .divcls3 {
      background: @grayBgColor;
      padding-bottom: 0;
    }

    .list-view {
      overflow: hidden;
      background-color: #ffffff !important;
      margin-bottom: 10px;

      .list-view-cell {
        margin-top: 1rem;
        padding: 0 1rem 1rem 1rem;
        border-bottom: 1px solid @grayBorderColor;

        &-box {
          position: relative;
          min-height: 70px;

          &-left {
            position: absolute;
            top: 50%;
            margin-top: -30px;
          }

          &-right {
            padding-left: 70px;
            font-size: @mainTxtSize;

            & > h3 {
              margin-bottom: .4rem;
              display: -webkit-box;
              overflow: hidden;
              text-overflow: ellipsis;
              word-break: break-all;
              /*! autoprefixer: off */
              -webkit-box-orient: vertical;
              /* autoprefixer: on */
              -webkit-line-clamp: 1;
              font-size: @bigSize;
            }

            & > p {
              line-height: 2rem;
              font-size: @smallSize;
            }
          }
        }

        & > p {
          overflow: hidden;
          text-overflow: ellipsis;
        }

        &-bigFont {
          word-break: break-all;
          margin-bottom: .6rem;
          padding-right: 1rem;
          //display: -webkit-box;
          //overflow: hidden;
          //text-overflow: ellipsis;
          //word-break: break-all;
          ///*! autoprefixer: off */
          //-webkit-box-orient: vertical;
          ///* autoprefixer: on */
          //-webkit-line-clamp: 1;
          font-size: @btnSize;
          vertical-align: middle;
        }

        &-status {
          display: -webkit-inline-box;
          //display: inline-block;
          padding: 0 .4rem;
          border-radius: 2rem;
          //background-color: @statusBlueBgColor;
          font-size: 1.2rem;
          //line-height: 1.4rem;
          //color: @activeColor;
          //border: 1px solid;
          vertical-align: middle;

          &.ongoing {
            color: #50b9f9;
            background-color: #d3edfd;
            border: 1px solid rgba(80, 185, 249, .3);
            /*background-image: -webkit-linear-gradient(bottom, #50b9f9, #50b9f9 50%, transparent 50%);
            background-image: linear-gradient(0deg, #50b9f9, #50b9f9 50%, transparent 50%);
            background-size: 100% 1px;
            background-repeat: no-repeat;
            background-position: bottom;*/
          }

          &.finish {
            color: #85BD52;
            background-color: #e0efd4;
            border: 1px solid rgba(133, 189, 82, .3);
            /*background-image: -webkit-linear-gradient(bottom, #85BD52, #85BD52 50%, transparent 50%);
            background-image: linear-gradient(0deg, #85BD52, #85BD52 50%, transparent 50%);
            background-size: 100% 1px;
            background-repeat: no-repeat;
            background-position: bottom;*/
          }

          &.cancel {
            color: #AAAAAA;
            background-color: #ededed;
            border: 1px solid rgba(170, 170, 170, .3);
            /*background-image: -webkit-linear-gradient(bottom, #AAAAAA, #AAAAAA 50%, transparent 50%);
            background-image: linear-gradient(0deg, #AAAAAA, #AAAAAA 50%, transparent 50%);
            background-size: 100% 1px;
            background-repeat: no-repeat;
            background-position: bottom;*/
          }
        }

        &-smallFont {
          line-height: 2rem;
        }

        &-notice {
          padding: 5px 15px;
          font-size: 14px;
          color: @subTxtColor;
        }

        &-info {
          color: @subTxtColor;
          font-size: 14px;
        }

        &-divided {
          height: 10px;
          width: 100%;
          background: transparent;
        }
      }
    }

    .list-view-margin {
      padding: 1rem;
      background-color: #FFFFFF;
      border-bottom: 1px solid @grayBorderColor;
    }

    .select-option {
      float: right;
      color: @subTxtColor;
    }

    .select-option.haveChoose {
      color: @mainFontColor;
    }
  }
}

.tips-bg-rsp {
  border-radius: 5px;
  background-color: #DFF2F7;
  padding: 3px 8px;
}

.tips-bg-gray {
  padding: 1rem;
  color: @subTxtColor;
  font-size: @smallerSize;
  background-color: @grayBgColor;
}

.nav-right {
  position: absolute;
  right: 15px;
  color: inherit;
  top: 50%;
  margin-top: -11px;
}

.tips-grey {
  color: @subTxtColor;
  font-size: @smallerSize;
  margin-right: 1rem;
}

.tips-active {
  color: @activeColor;
}

.item-small-size {
  font-size: @smallestSize;
}

.ellipsis {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  -webkit-line-clamp: 3;
}

.turnToEstb {
  position: fixed;
  right: 2rem;
  bottom: 2rem;
  width: 5.5rem;
  height: 5.5rem;
  background: url("../images/icon-add.png");
  background-size: 100%;

  &-circle {
    display: none;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background-color: @activeColor;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
    text-align: center;
    padding-top: .2rem;

    i {
      color: #ffffff;
      font-size: 3rem;
    }
  }
}

.praise-list {
  margin: 1rem;

  &-wrap {
    position: relative;
    /*padding: 1rem;*/
    margin: 1rem auto;
    background-color: #FFFFFF;
    border-radius: .8rem;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
    z-index: 2;

    &-top {
      margin: auto 1rem;
      padding: 1rem 0;
      border-top-left-radius: .8rem;
      border-top-right-radius: .8rem;
      border-bottom: 1px solid @grayBorderColor;

      img {
        width: 45px;
        height: 45px;
        border-radius: 50%;
        vertical-align: middle;
        margin-right: 1rem;
      }
    }

    &-rt {
      position: absolute;
      top: 0;
      right: 0;
      width: 3.8rem;
      height: 3.8rem;

      &.useful {
        background: url("../../assets/images/useful-r.png") no-repeat;
        background-size: 100%;
      }

      &.useless {
        background: url("../../assets/images/useless-r.png") no-repeat;
        background-size: 100%;
      }

      &.evaluate {
        background: url("../../assets/images/evaluate-r.png") no-repeat;
        background-size: 100%;
      }
    }

    &-evaluate {
      position: absolute;
      top: 15px;
      right: 0;
      width: 10rem;

      img {
        width: 3.2rem;
        margin-left: 1.3rem;
      }
    }

    &-content {
      margin: auto 1rem;
      padding: 1rem 0;
      //text-indent: 2.7rem;
      border-bottom-left-radius: .8rem;
      border-bottom-right-radius: .8rem;

      &.bt-border {
        border-bottom: 1px dashed @subTxtColor;
      }
    }

    &-reply {
      padding: 1rem;
      border-bottom-left-radius: .8rem;
      border-bottom-right-radius: .8rem;
      color: @subTxtColor;
      background: #F7F9F9;
      font-size: 1.4rem;
    }
  }
}
